<template>
	<div class="news">
	 <div class="news-title">
      <img src="../assets/img/h3_bj.jpg" >
      <h3>新闻资讯</h3>
      <img src="../assets/img/h3_bj.jpg" >
    </div>
    <div class="name-en">
      <h3>NEWS</h3>
    </div>
    <div class="new-list" v-for="item in newsList" :key="item.id">
      <h3>
        <span><img src="../assets/img/icon-arrow.png" height="9" width="6"></span>
        <p>{{item.name}}</p>
        <strong>{{item.date}}</strong>
      </h3>
      <p class="desc">{{item.zs_desc}}</p>
    </div>
    <router-link to="/">
      <span class="more">查看更多</span>
    </router-link>
	</div>
</template>

<script>
export default {
  name: "HomeNew",
  data() {
    return {
      newsList: [
        {
          id: "1",
          name: "关于调整新设立企业申报建造师企造师审有",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "2",
          name: "关于调整新设立企业申报建造师企造师审有2",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "3",
          name: "关于调整新设立企业申报建造师企造师审有3",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "4",
          name: "关于调整新设立企业申报建造师企造师审有4",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped>
a
  text-decoration none

.news
  width 96%
  padding .5rem 2%
  .news-title
    margin 0 auto
    display flex
    justify-content center
    img
      width .48rem
      height .27rem
    h3
      font-size .3rem
      padding 0 .12rem
      color #303030
  .name-en
    width 100%
    text-align center
    margin-top .13rem
    margin-bottom .45rem
    h3
      color #b6b6b6
      font-size .3rem
  .new-list
    border-bottom 1px #333 dashed
    margin-bottom .32rem
    h3
      color #363636
      position relative
      width 100%
      display flex
      text-align left
      align-items center
      span
        display block
        img
          width .06rem
          height .09rem
          display block
      p
        padding-left .13rem    
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
        width: 65%;
        font-size .2rem
      strong
        font-style normal
        font-size .18rem
        color #838383
        position absolute
        top 0
        right 0
    .desc
      color #363636
      font-size .16rem
      text-align left
      line-height .32rem
      padding .16rem .18rem
  .new-list:last-child
    border none

.more
  background-color #ffc507
  color #3c3c3c
  font-size .16rem
  width 1.52rem
  height .46rem
  display block
  line-height .46rem
  text-align center
  margin 0 auto
</style>
